<template>
  <div class="timeline-group" ref="TimelineGroup"></div>
</template>

<script>
import timeAxis from './js'
import elementResizeDetectorMaker from "element-resize-detector";
import moment from 'moment';

export default {
  props: {
    width: {
      type: [Number, String],
      default: '100%'
    },
    height: {
      type: Number,
      default: 40
    },
    item: {
      type: Object,
      default: null
    },
    movePlay: {
      type: Boolean,
      default: false
    },
    clickPlay: {
      type: Boolean,
      default: true
    },
    bg: {
      type: String,
      default: '#000'
    }
  },
  data() {
    return {
      axis: null
    }
  },
  computed: {},
  watch: {
    item(val) {
      this.axis.updateDatas({
        zoomHours: 24,
        date: val.date,
        times: val.times
      })
    }
  },
  created() {

  },
  mounted() {
    this.$nextTick(() => {
      let times = [
        {
          begin: moment('2022-04-12 00:00:00').format('x'),
          end: moment('2022-04-12 23:59:59').format('x'),
          style: {
            background: 'rgba(17,40,189,0.5)'
          }
        },
        {
          begin: moment('2022-04-14 04:00:00').format('x'),
          end: moment('2022-04-14 07:00:00').format('x'),
          style: {
            background: 'rgba(77,17,189,0.5)'
          }
        },
        {
          begin: moment('2022-04-14 08:00:00').format('x'),
          end: moment('2022-04-14 09:00:00').format('x'),
          style: {
            background: 'rgba(172,17,189,0.5)'
          }
        },
        {
          begin: moment('2022-04-14 09:00:00').format('x'),
          end: moment('2022-04-14 10:00:00').format('x'),
          style: {
            background: 'rgba(189,160,17,0.5)'
          }
        },
        {
          begin: moment('2022-04-14 10:00:00').format('x'),
          end: moment('2022-04-14 11:00:00').format('x'),
          style: {
            background: 'rgba(175,5,5,0.5)'
          }
        },
        {
          begin: new Date(new Date('2022-04-14 11:00:00')).getTime(),
          end: new Date(new Date('2022-04-14 12:00:00')).getTime(),
          style: {
            background: 'rgba(29,182,49,0.5)'
          }
        },
        {
          begin: new Date(new Date('2022-04-14 12:00:00')).getTime(),
          end: new Date(new Date('2022-04-14 13:00:00')).getTime()
        }
      ]
      console.log(times)
      this.initTimeLine(times)
    })
    window.addEventListener('resize', this.resizeHandler)
    this.watchSize()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resizeHandler)
  },
  methods: {
    watchSize() {
      let erd = elementResizeDetectorMaker();
      erd.listenTo(this.$refs.TimelineGroup, (element) => { // 这里的this.$refs.fan指定要监听的元素对象，对应的是<div ref="fan"></div>
        this.$nextTick(() => { // 这里填写监听改变后的操作
          if (this.axis) {
            this.axis.resize();
          }
        });
      });
    },
    initTimeLine(times) {
      this.axis = new timeAxis({
        dom: this.$refs.TimelineGroup,
        bg: this.bg,
        width: this.width,
        height: this.height,
        date: new Date(new Date('2022-04-14').toLocaleDateString()).getTime(),
        cellStyle:{
          background: 'rgba(24,208,217,0.5)'
        },
        timecell: [...times],
        callback: (data) => {
          // {mode: 触发方式 timestamp: 时间戳 valid: 是否有效}
          console.log(data)
          this.$emit('changeTime', data)
        }
      })
    },
    // 更新时间
    updateTime(time) {
      this.axis.updateTime(time)
    },
    // 窗口变化
    resizeHandler() {
      this.axis.resize();
    }
  }
}
</script>

<style scoped lang="scss">
  .timeline-group {
    height: 100%;
    font-size: 0;

    .timeline-canvas {
      background-color: #2b2f33;
    }

    canvas {
      display: block;
    }
  }
</style>
